<template>
    <div class="detail_container slide-enter-active">
        <Header title="影片详情">
            <i class="iconfont icon-right" @touchstart="handleToBack"></i>
        </Header>
        <loading v-if="isLoading" />
            <div v-else id="content" class="contentDetail">
                <div class="detail_list">
                    <div 
                        class="detail_list_bg" 
                        :style="{ 'background-image': 'url('+ movieDetail.img.replace(/w\.h/,'148.208') +')' }">
                    </div>
                    <div class="detail_list_filter"></div>
                    <div class="detail_list_content">
                        <div class="detail_list_img">
                            <!-- <img :src="movieDetail.img | setWH('148.208')"> -->
                            <img v-lazy="$picFix(movieDetail.img, '148.208')" alt="">
                        </div>      
                        <div class="detail_list_info">
                            <h2>{{ movieDetail.nm }}</h2>
                            <p>{{ movieDetail.enm }}</p>
                            <p>{{ movieDetail.sc }}</p>
                            <p>{{ movieDetail.cat }}</p>
                            <p>{{ movieDetail.src }} / {{ movieDetail.dur }}分钟</p>
                            <p>{{ movieDetail.pubDesc }}</p>
                        </div>
                    </div>
                </div>
                <div class="detail_intro">
                    <p>
                    {{ movieDetail.dra }}  
                    </p>
                </div>
                <div class="detail_player swiper-container" ref="detail_player">
                    <ul class="swiper-wrapper">
                        <li 
                            v-for="item in movieDetail.photos" 
                            :key ="item.id"  
                            class="swiper-slide">
                            <div>
                                <img v-lazy="$picFix(item, '140.127')">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
</template>

<script>
import Header from '@/components/Header'
export default {
    name: 'MovieDetail',
    components: {
        Header
    },
    data () {
        return {
            movieDetail: {},
            isLoading: true
        }
    },
    methods: {
        handleToBack () {
            this.$router.back() // 返回到上一个页面
        } 
    },
    props: ['movieId'],
    mounted () {
        this.$axios.get('/api/detailmovie?movieId=' + this.movieId)
        .then(res => {
            console.log(res)
            const msg = res.data.msg
            const DetailData = res.data.data
            if (msg === 'ok') {
                this.movieDetail = DetailData.detailMovie
                this.isLoading = false
                this.$nextTick(() => {
                    new Swiper(this.$refs.detail_player, {
                        slidesPerView : 'auto',
                        freeMode : true,
                        freeModeSticky : true,
                    })
                })
            }
        })
        .catch(err => {
            console.log('请求失败' + err)
        })

    }
}
</script>

<style lang="scss" scoped>
    .detail_container {
        width: 100%;
        min-height: 100%;
        background: $color;
        position: absolute;
        top: 0;
        left : 0;
        z-index: 100;
    }
    .slide-enter-active {
         animation: .3s slideMove;
    }   
    @keyframes slideMove {
        0% { transform: translateX(100%); }
        100% { transform: translateX(0%); }
    }

.contentDetail { 
    display: block; 
    margin-bottom: 0; 
    .detail_list { 
        width: 100%;
        height: 200px; 
        position: relative;
        overflow: hidden;
        .detail_list_bg { 
            position: absolute; 
            left: 0; 
            top: 0;
            width: 100%; 
            height: 100%; 
            background: 0 40%; 
            filter: blur(20px); 
            background-size: cover; 
        }
        .detail_list_filter {
            position: absolute; 
            left: 0; 
            top: 0; 
            z-index: 1; 
            width: 100%; 
            height: 100%; 
            background-color: #40454d;
            opacity: .55; 
        }
        .detail_list_content { 
            position: absolute; 
            left: 0; 
            top: 0; 
            z-index: 2;
            display: flex; 
            width: 100%;
            height: 100%; 
            .detail_list_img { 
                width: 108px; 
                height: 150px; 
                border: 1px solid #f0f2f3; 
                margin: 20px;
                img {
                    width: 100%; 
                    height: 100%;
                }
            }
            .detail_list_info { 
                margin-top: 20px;
                h2 { 
                    font-size: 20px; 
                    color: $color; 
                    font-weight: normal; 
                    line-height: 40px;
                }
                p { 
                    color: $color; 
                    line-height: 20px; 
                    font-size: 14px; 
                    color:#ccc;
                }
            }
        }
    }
    .detail_intro {
        padding: 10px;
        }
    .detail_player { 
        margin: 20px;
        .swiper-slide { 
            width: 70px; 
            margin-right: 20px; 
            text-align: center; 
            font-size: 14px;
            img { 
                width: 100%; 
                margin-bottom: 5px;
            }
            p:nth-of-type(2) { 
                color:#999;
            }
        }
    }
}
</style>
